
declare var google;
 import { Component,ViewChild,ElementRef } from "@angular/core/";
 import { HttpClient } from '@angular/common/http'
 import { App,LoadingController } from "ionic-angular"
 import { NativeStorage } from '@ionic-native/native-storage'; 
 import { TranslateService } from '@ngx-translate/core';

 import { ProductrentPage } from "../product/rent/rent";
 import { ProductservicePage } from "../product/service/service";
 import { ProductbuyPage } from "../product/buy/buy";
 import { ProductperPage } from "../product/per/per";

 import { AppConfig } from '../../app/app.config';
@Component({
  selector: 'page-contact',
  templateUrl: 'alerts.html'
})
export class AlertsPage {
  @ViewChild('map') mapElement: ElementRef;
  list:any;
  list_lst=[];
  maps:any;
  page=1;
  show_type='Map';
  loading:any;
  markers=[];
  constructor(
    private app:App,
    private stroge:NativeStorage,
    private http: HttpClient,
    private loadingCtrl:LoadingController,
    private translate: TranslateService
  ) {
    translate.setDefaultLang('en')
  }
  ngAfterViewInit(){
    let latLng = new google.maps.LatLng(43.0741904, -88.2801122);
    let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    }
    this.maps = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
  ionViewDidEnter(){
    this.getData()
    this.stroge.getItem('lang').then(res=>{
        this.translate.use(res)
    })
  }
  getData(){
    this.stroge.getItem('token').then((resp)=>{
      this.loadWait()
      this.http.get(AppConfig.getUrl()+'house/getHistory?p='+this.page+'&limit=5&token='+resp).subscribe(res=>{
        if(res['code']==101){
          this.maps.setCenter({
            lat: Number(res['data']['rows'][0]['latitude']),
            lng: Number(res['data']['rows'][0]['longitude'])
          })
          this.list_lst = res['data']['rows']
          this.page++
          this.datatodata()
          this.markerAdd();
        }
        this.loading.dismiss()
      })
    })
  }
  loadWait(){
    this.loading = this.loadingCtrl.create({
        content: 'Please wait...'
    });
    this.loading.present();
  }
  toggle(){
    if(this.show_type==='List'){
      this.show_type='Map'
      this.page = 1;
    }else{
      this.show_type='List'
      // this.stroge.getItem('token').then((resp)=>{
      //   this.http.get(AppConfig.getUrl()+'house/getHistory?p=1&limit=5000&token='+resp).subscribe(res=>{
      //     if(res['code']==101){
      //       this.maps.setCenter(new google.maps.LatLng(res['data']['rows'][0]['latitude'], res['data']['rows'][0]['longitude']));
      //       this.list = res['data']['rows']
      //       this.page++
      //       this.markerAdd()
      //     }
      //   })
      // })
    }
  }
  datatodata(){
    this.list_lst.forEach((item,i) => {
      switch(item.cate){
        case 1:
        this.list_lst[i].cateName='Rent'
          break
        case 2:
        this.list_lst[i].cateName='Buy'
          break
        case 3:
        this.list_lst[i].cateName='Rent per day'
          break
        case 4:
        this.list_lst[i].cateName='Service'
          break
      }
      switch(item.price_unit){
        case 1:
        this.list_lst[i].price_unit='£'
          break
        case 2:
        this.list_lst[i].price_unit='€'
          break
        case 3:
        this.list_lst[i].price_unit='$'
          break
        case 4:
        this.list_lst[i].price_unit='¥'
          break
      }
      switch(item.price_type){
        case 1:
          this.list_lst[i].price_type='Month'
          break
        case 2:
          this.list_lst[i].price_type='Week'
          break
        case 3:
          this.list_lst[i].price_type='Day'
          break
      }
      switch(item.area_unit){
        case 1:
          this.list_lst[i].area_unit='SQ.FT'
          this.list_lst[i].other_area = Math.ceil(this.list_lst[i].area / 10.764);
          this.list_lst[i].other_area_unit='SQ.M'
          break
        case 2:
          this.list_lst[i].area_unit='SQ.M'
          this.list_lst[i].other_area = Math.ceil(this.list_lst[i].area * 10.764);
          this.list_lst[i].other_area_unit='SQ.FT'
          break
      }
      this.list_lst[i].img = 'url('+AppConfig.getMainUrl()+item.logo+')';
    });
  }
  markerAdd(){
    let zoom = this.maps.getZoom(),sign
    if( zoom>12 ){
      sign = 1;
    }
    if( zoom<=12 && zoom>=10 ){
      sign = 2;
    }
    if( zoom<10 ){
      sign = 3;
    }
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(null);
    }
    if(sign==1){
      let color;
      for (let item of this.list_lst) {
        let price,icon;
        switch(item.price_unit){
            case 1:
              price='£'+item.price;
              break
            case 2:
              price='€'+item.price;
              break
            case 3:
              price='$'+item.price;
              break
            case 4:
              price='¥'+item.price;
              break
            default:
              price='¥'+item.price;
        }
        switch(item.cate){
          case 1:
            icon ='./assets/icon/markerBlue.png';
            break
          case 2:
            icon='./assets/icon/markerGreen.png';
            break
          case 3:
            icon='./assets/icon/markerRed.png';
            break
          case 4:
            icon='./assets/icon/markerYellow.png';
            break
        }
        let marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.latitude,item.longitude),
            icon: icon,
            map:this.maps,
            label: {
              fontSize: '18px',
              color:'#fff',
              text: price
            }
        });
        this.markers.push(marker);
      }
    }
    if(sign==2){
        let color;
        for (let item of this.list_lst) {
          switch(item.cate){
            case 1:
              color="b"
              break
            case 2:
              color="g"
              break
            case 3:
              color="r"
              break
            case 4:
              color="y"
              break
          }
          let marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.latitude,item.longitude),
            map: this.maps,
            icon: './assets/icon/map_map_'+color+'.png',
          });
          this.markers.push(marker);
        }
      }
      if(sign==3){
        let color;
        for (let item of this.list_lst) {
          switch(item.cate){
            case 1:
              color="b"
              break
            case 2:
              color="g"
              break
            case 3:
              color="r"
              break
            case 4:
              color="y"
              break
          }
          let marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.latitude,item.longitude),
            map: this.maps,
            icon: './assets/icon/map_dian_'+color+'.png',
          });
          this.markers.push(marker);
        }
      }
      
  }
  doInfinite(infiniteScroll) {
    this.stroge.getItem('token').then((resp)=>{
      this.http.get(AppConfig.getUrl()+'house/getHistory?p='+this.page+'&limit=5&token='+resp).subscribe(res=>{
        if(res['code']==101){
          res['data']['rows'].forEach(element => {
            this.list_lst.push(element)
          });
          this.page++
          this.datatodata()
          infiniteScroll.complete();
        }else{
          infiniteScroll.enable(false)
        }
        
      })
    })
  }
  goDetail(item:any){
    let page
    switch(item.cate){
      case 1:
        page = ProductrentPage
        break
      case 2:
        page = ProductbuyPage
        break
      case 3:
        page = ProductperPage
        break
      case 4:
        page = ProductservicePage
        break
    }
    this.app.getRootNav().push(page,{id:item.id})
  }
}
